<template>
	<view class="order-item-wrap">
		<view class="order-item-header">
			<view class="header-order-number">
				Order number：{{item.order_sn}}
			</view>
		</view>
		<view class="order-item-conter" v-for="it,ind in item.order_items" :key="ind">
			<img class="order-image" :src="`${$imghttps}${it.goods_sku_info.sku_images}`" mode=""></img>
			<view class="conter-box">
				<view class="conter-title">{{it.goods_title}}</view>
				<view class="conter-num conter-sku">
					<text>{{it.goods_sku_info.color}}</text>
					<text>{{it.goods_sku_info.sku_nuber}}</text>
					<text>{{it.goods_sku_info.material_quality}}</text>
				</view>
				<view class="conter-num conter-sku">
					<text>{{setPrice(it.goods_sku_info.local_price)}}/{{it.price_mode == 1?"Dozen":""}}{{it.price_mode == 2?"Piece":""}}</text>
					<text>
						{{setPrice(it.value)}}/Ctn
					</text>
				</view>
				<view class="conter-num conter-sku">Quantity：{{it.goods_number}}Ctn</view>
				<view class="conter-num conter-sku">
					<text>CustomerName：{{customInfo.real_name}}</text>
				</view>
				<view class="conter-num conter-sku">
					<text>Phone：{{customInfo.user_phone}}</text>
				</view>
				<view class="conter-num conter-sku">
					<text>Address：{{customInfo.address}}</text>
				</view>
				<view class="conter-num flex">
          <view class="txt-l">Total：{{setPrice(item.pay_money)}}</view>
          <view class="txt-r" @tap="handleUpload(item)"><text>Upload transport slip</text></view>
        </view>
			</view>
		</view>
	</view>
</template>

<script>
import utils from '../../utils';
	export default {
		props: {
			item: {
				type: Object,
				default () {
					return {

					}
				}
			},
			customInfo: {
				type: Object,
				default () {
					return {

					}
				}
			},
			index: {
				type: Number,
				default: 0
			},
			tabBarCode: {
				type: Number,
				default: 0
			}
		},
		data:{
			checkedList:[]
		},
		components: {
		},
		methods: {
			// 上传付款凭证
			handleUpload(item) {
        let that=this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: that.$http + '/file/upload', // 服务器上传接口地址
							filePath: tempFilePaths[0],
							name: 'file', // 必须填写，后台用来接收文件
							formData: {
								'user': 'test' // 其他要传的参数
							},
							header: {
								token: uni.getStorageSync('token')
							},
							success: async (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data)
								if (data.code == 200) {
                  that.$ajax(`${that.$http}/order/uploadLogisticsVoucher?id=${item.id}`, "POST", null, (response) => {
                    let res = JSON.parse(response)
                    if(res.code==200){
                      uni.showToast({
                        icon: 'none',
                        title: '上传成功'
                      })
                      that.$emit('refreshOrder')
                    }
                  })
								} else {
									uni.showToast({
										icon: 'none',
										title: data.msg||'系统异常'
									})
								}
							},
							fail: (uploadFileErr) => {
								console.log('图片上传失败', uploadFileErr);
							}
						});
					},
					fail: (chooseImageErr) => {
						console.log('选择图片失败', chooseImageErr);
					}
				})
			},
			handleChange(e,id){
				this.$emit('selectOrderIds', {
					order_id: id,
					order_index: this.index
				})
			},
			// 价格
			setPrice(price) {
				return utils.setPrice(price)
			},
			async getOrderInfo() {
				this.$emit('refresh', this.item)
			},
			onPaymentClick() {
				this.$emit('payment', this.item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header-order-status {
		color: #f30;
	}
	.buton {
		min-width: 156rpx;
		height: 60rpx;
		color: #FFFFFF;
		border-radius: 62rpx;
		background-color: #FF3C3F;
		text-align: center;
		line-height: 60rpx;
		font-size: 28rpx;
		margin: 0rpx 10rpx;
		padding: 0 20rpx;
	}

	.buton_one {
		min-width: 108rpx;
		height: 60rpx;
		border-radius: 62rpx;
		border: 1rpx solid #FF3C3F;
		background-color: #FFFFFF;
		color: #FF3C3F;
		font-size: 24rpx;
		font-weight: 400rpx;
		text-align: center;
		line-height: 60rpx;
		padding: 0 20rpx;
	}

	.order-item-wrap {
		width: 100%;
		background: #fff;

		.order-item-header {
			width: 100%;
			height: 76rpx;
			line-height: 76rpx;
			padding: 0 24rpx;   
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			font-size: 26rpx;
			.header-order-number {
				font-size: 28rpx;
				color: #999;
			}
		}
		.order-item-conter {
			border-bottom: 1px solid #dfdfdf;
			border-top: 1px solid #dfdfdf;
			padding: 20rpx;
			display: flex;
			flex-direction: row;

			.order-image {
				width: 180rpx;
				height: 180rpx;
			}
			.conter-box {
				margin-left: 20rpx;
				flex: 1;
				width: 100%;

				.conter-num {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					margin-top: 10rpx;
					margin-bottom: 20rpx;
				}
        .conter-num.flex{
          display: flex;
          justify-content: space-between;
          align-items: center;
          view{
            flex: 1;
            text{
              display: inline-block;
              width: 130px;
              height: 30px;
              font-weight: 600;
              text-align: center;
              line-height: 30px;
              color: #FF3C3F;
              border: 1px solid #FF3C3F;
              border-radius: 6px;
            }
          }
          view.txt-r{
            display: flex;
            justify-content: flex-end;
          }
        }
				.conter-sku {
					flex-direction: row;
					margin-bottom: 0;
					text {
						margin-right: 20rpx;
					}
				}
			}
		}

		.order-item-footer {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			line-height: 84rpx;
			padding: 0 24rpx;

			.footer-totle {
				flex-direction: row;
				font-size: 24rpx;
				color: #999;
			}
		}
	}
</style>